jQuery — Height, Hide, ID, and More

jQuery is a popular JavaScript for creating dynamic web pages.

In this article, we’ll look at how to using jQuery in our web apps.

.height()

The .height() method gets the current computed height for the first element in the set of matched elements.

It can also ser the height of every matched element.

For example, we can get the height of window by writing:

console.log($(window).height())

And if we have a div:

<div></div>

with the following CSS:

div {
  width: 50px;
  height: 70px;
  float: left;
  margin: 5px;
  background: red;
  cursor: pointer;
}

We can set its height when we click it by writing:

$("div").one("click", function() {
  $(this).height(30).css({
    cursor: "auto",
    backgroundColor: "green"
  });
});

The height is in pixels.

:hidden Selector

We can use the :hidden select to select all elements that are hidden.

For example, if we have:

<div></div>
<div style="display:none;">Hidden</div>
<div></div>

<div class="starthidden">Hidden</div>
<div></div>

<form>
  <input type="hidden">
  <input type="hidden">
  <input type="hidden">
</form>

and the following CSS:

.starthidden {
  display: none;
}

Then we can get all the hidden elements that aren’t script elements buy writing:

const hiddenElements = $("body").find(":hidden").not("script");
console.log(hiddenElements)

We can also show the hidden divs by writing:

$("div:hidden").show(3000);

.hide()

The .hide() method hides the matched elements.

For example, if we have:

<div id="clickme">
  Click here
</div>
<img id="book" src="https://i.picsum.photos/id/23/200/200.jpg?hmac=IMR2f77CBqpauCb5W6kGzhwbKatX_r9IvgWj6n7FQ7c" alt="">

Then we can hide the image when we click Click here by writing:

$("#clickme").click(function() {
  $("#book").hide("slow", function() {
    alert("Animation complete.");
  });
});

The first argument of hide is the animation tup;e.

And the 2nd argument is the callback that’s called when the animation is done.

.hover()

The hover method lets us bind event handlers for hovering over and hover out of the element.

For example, if we have:

<ul>
  <li>Milk</li>
  <li>Bread</li>
  <li class="fade">Chips</li>
  <li class="fade">Socks</li>
</ul>

Then we can add *** to the li text when we hover over it by writing:

$("li").hover(
  function() {
    $(this).append($("<span> ***</span>"));
  },
  function() {
    $(this).find("span").last().remove();
  }
);

$("li.fade").hover(function() {
  $(this).fadeOut(100);
  $(this).fadeIn(500);
});

The *** will disappear when we move our mouse outside.

.html()

The .html() method gets the HTML content of the first element in the set of matched elements.

It can also be used to set the HTML of every matched element.

For example, if we have:

<p>
  <b>Click</b> to change the <span id="tag">html</span>
</p>

Then we can click on the p element to change the text to its raw HTML form by writing:

$("p").click(function() {
  const htmlString = $(this).html();
  $(this).text(htmlString);
});

We call html in the first line to get the HTML code, then we set that as the text value.

It’ll be escaped when we set it as the text content so that we’ll see the raw code displayed.

ID Selector (“#id”)

We can select a single element with the ID selector.

For example, if we have:

<div id="myDiv">id="myDiv"</div>

Then we can add a red border to the div by writing:

$("#myDiv").css("border", "3px solid red");

Conclusion

We can set the height, hide elements, get its HTML code, and more with jQuery.